<template>
	<view class="DistRecord">
		<u-navbar title="邀请详情" :placeholder="true" :auto-back="true" bg-color="#F6F8FA"></u-navbar>
		<view class="record_box">
			<view class="flex_box flex_row_between record_info">
				<view class="record_info_item">
					<view class="record_info_num record_info_num1"><text>{{over}}</text>人</view>
					<view class="record_info_text">邀请成功</view>
				</view>
				<u-line color="#D2DAE2" length="96rpx" direction="col"></u-line>
				<view class="record_info_item">
					<view class="record_info_num"><text>{{start}}</text>人</view>
					<view class="record_info_text">邀请在路上</view>
				</view>
			</view>
			<view class="record_main">
				<view class="flex_box record_title">
					<view class="record_title_text">好友名称</view>
					<view class="record_title_text">时间</view>
					<view class="record_title_text">状态</view>
				</view>
				<view v-for="(item,index) in list" :key="index" class="flex_box record_item">
					<view class="record_text u-line-1">{{item.nickname}}</view>
					<view class="record_text u-line-1">{{item.createtime | date('mm-dd hh:MM')}}</view>
					<view class="record_text u-line-1" :class="'record_text'+item.status">{{item.status_text}}</view>
				</view>
				<view v-if="listStatus==='nomore'&&list.length===0" class="empty_box">
					<u-empty mode="data" icon="/static/empty/data.png" text="亲，该时间段还没有邀请记录哦！"></u-empty>
				</view>
				<block v-else>
					<u-loadmore :line="true" @loadmore="getMore" :status="listStatus"></u-loadmore>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		distRecord,
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				params: {
					page: 1,
				},
				list: [],
				listStatus: "loading",
				start: '',
				over: '',
			}
		},
		onLoad(options) {
			that = this;
			that.getList();
		},
		onReachBottom() {
			that.getMore();
		},
		methods: {
			// 获取列表
			getList(){
				distRecord({params: that.params}).then(res => {
					that.start = res.data.start
					that.over = res.data.over
					let list = res.data.data;
					that.listStatus = list.length < res.data.per_page ? "nomore" : "loadmore";
					that.list = [...that.list,...list];
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// 点击加载更多
			getMore(){
				that.listStatus==="loadmore"&&(that.params.page++,that.listStatus = "loading",that.getList());
			},
		}
	}
</script>

<style lang="scss" scoped>
	.DistRecord{
		min-height: 100vh;
		background-color: #F6F8FA;
		.record_box{
			padding: 36rpx;
			.record_info{
				border-radius: 24rpx;
				height: 218rpx;
				background-color: #FFFFFF;
				margin-bottom: 36rpx;
				.record_info_item{
					width: 338rpx;
					text-align: center;
					.record_info_num{
						font-size: 24rpx;
						color: #808E9B;
						font-weight: 500;
						line-height: 70rpx;
						text{
							font-size: 60rpx;
							color: #1E272E;
							font-weight: bold;
						}
					}
					.record_info_num1{
						text{
							color: #FF3F34;
						}
					}
					.record_info_text{
						font-size: 24rpx;
						color: #1E272E;
						font-weight: 500;
						line-height: 36rpx;
					}
				}
			}
			.record_main{
				background-color: #FFFFFF;
				border-radius: 24rpx;
				padding: 0 36rpx 36rpx;
				.record_title{
					height: 100rpx;
					text-align: center;
					border-bottom: 2rpx solid #FFE7C7;
					.record_title_text{
						width: 226rpx;
						font-size: 32rpx;
						color: #1E272E;
						font-weight: 500;
					}
				}
				.record_item{
					height: 80rpx;
					text-align: center;
					.record_text{
						width: 226rpx;
						font-size: 24rpx;
						color: #1E272E;
						font-weight: 500;
					}
					.record_text0{
						color: #FFD32A;
					}
					.record_text1{
						color: #0FBCF9;
					}
				}
			}
		}
	}
</style>
